<template>
	<view class="container">
		<view class="headerNav"><u-navbar title="邮箱认证" @leftClick="goBack" placeholder></u-navbar></view>
		<view class="bigNav">
			<view class="topnav">
				<u-icon name="error-circle-fill" size="30"></u-icon>
				<text class="text">账号绑定邮箱后，邮箱号可用于账号登录和找回密码！</text>
			</view>
			<view class="bottomnav">
				<view class="content_main_ipt u-m-t-50">
					<u-field v-model="data.email" type="text" placeholder="请输入新的邮箱" :label-width="0">
					</u-field>
					<u-field v-model="data.code" type="number" placeholder="请输入验证码" maxlength='4' :label-width="0">
						<template v-slot:right>
							<view class="u-font-12 text" @click="getCode">
								{{data.codeText}}
							</view>
						</template>
					</u-field>
					<u-verification-code ref="uCode" @change="codeChange" keep-running unique-key="email"></u-verification-code>
				</view>
			</view>
		</view>
		<view class="btnBox">
			<button @tap="toSave">保存</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue';
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const pageInstance = getCurrentInstance()
	const data = reactive({
		utype: uni.getStorageSync('utype'),
		type: null,
		title: "",
		email: '',
		old: "",
		code: '',
		codeText: ''
	})
	// 验证码倒计时
	const codeChange = (text) => {
		data.codeText = text;
	}
	// 点击获取验证码
	const getCode = async () => {
		if (pageInstance.refs.uCode.canGetCode) {
			
			if (!uni.$u.test.email(data.email)) return uni.$u.toast('请输入正确邮箱')
			if (data.email == data.old) return uni.$u.toast('新邮箱和旧邮箱相同')
			let params = {
				email: data.email,
				utype: data.utype
			}
			let config = {
				custom: {
					loading: true
				}
			}
			let res = await uni.$u.api.sendmail(params, config)
			if (res) {
				uni.$u.toast('验证码已发送至邮箱')
				pageInstance.refs.uCode.start();
			}
		}
	}
	const toSave = async () => {
		if (!uni.$u.test.email(data.email)) return uni.$u.toast('请输入正确邮箱')
		if (!uni.$u.test.code(data.code, 4)) return uni.$u.toast('请输入验证码')
		let params = {
			email: data.email,
			code: data.code,
		}
		let config = {
			custom: {
				loading: true
			}
		}
		let res = await uni.$u.api.resetEmail(params, config)
		if (res) {
			uni.$u.toast('修改成功')
			setTimeout(() => {
				uni.$u.route({
					type: 'back'
				})
			}, 500)
		}
	}
	const goBack = () => {
		uni.$u.route({
			type: 'back'
		})
	}
	onLoad(({
		email
	}) => {
		if (email) {
			data.email = email;
			data.old = email
		}
	})
</script>

<style lang="scss" scoped>
	page,
	body {
		width: 100vw;
		height: 100%;
		background-color: #f8f8f8;
	}

	.container {
		width: 100%;
		height: 100%;
		padding: 30rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;

		.bigNav {
			width: 100%;

			.topnav {
				color: #E80F0F;
				font-size: 26rpx;
				font-family: SourceHanSansSC-regular;

				.text {
					margin-left: 10rpx;
				}
			}

			.bottomnav {
				width: 100%;

				.text {
					color: #00D075;
				}

			}
		}
	}

	:deep .fild-body {
		height: 120rpx;
	}

	.btnBox {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		button {
			width: 684rpx;
			background-color: #00D075;
			color: #fff;
			height: 68rpx;
			line-height: 68rpx;
			font-size: 28rpx;
			text-align: center;
			font-family: Arial;

			&::after {
				border: none;
			}

		}

	}
</style>